<template>
  <div class="flex items-center flex-col justify-center gap-4">
    <img class="errorimg" src="@/assets/img/errorpage.png" alt="404" />
    <h2 class="text-3xl font-bold">Page Not Found</h2>
    <p>The page you are looking for appears to have been moved.</p>
    <p>deleted, or dose not exist</p>
    <div class="flex gap-4">
      <el-button size="large" @click="handleHome" type="primary" style="width: 120px">Back to Home</el-button>
      <el-button size="large" @click="handleBack" type="primary" style="width: 120px" plain><el-icon><Back /></el-icon>Go Back</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const handleHome = () => {
  router.push({ path: '/' });
};

const handleBack = () => {
  window.history.back();
};

</script>

<style lang="scss" scoped>
.errorimg {
  width: 800px;
}
</style>